<template>
  <div>

    <h3>规则列表</h3>

    <el-alert
      v-if="!postForm.groupList || postForm.groupList.length===0"
      title="请点击右侧【添加新的大题】开始添加数据"
      type="info"
    />

    <el-card v-for="(item,index) in postForm.groupList" :id="item.id" :key="item.id" class="content-card">
      <div slot="header" class="clearfix" style="background: #eee; margin: -20px; padding: 20px">
        <el-input v-model="item.title" size="small" style="width: 200px" />
        <el-button size="small" icon="el-icon-plus" style="margin-left: 10px" @click="openSelectQu(index)">添加规则</el-button>
        <div style="float: right">
          <el-tooltip class="item" effect="dark" content="针对单选/多选/不定项题型打乱选项顺序" placement="bottom">
            <el-checkbox v-model="item.itemRand" label="选项乱序" />
          </el-tooltip>

        </div>

      </div>

      <div style="line-height: 36px">

        <el-table
          :data="item.ruleList"
          style="width: 100%"
        >
          <el-table-column
            prop="repoId_dictText"
            label="题库"
          />

          <el-table-column
            prop="quType_dictText"
            align="center"
            label="题型"
            width="120px"
          />

          <el-table-column
            prop="quLevel_dictText"
            align="center"
            label="难度"
            width="120px"
          />

          <el-table-column
            align="center"
            show-overflow-tooltip
            label="知识点">
            <template v-slot="{ row }">
              {{ pointNames(row.pointList) }}
            </template>

          </el-table-column>

          <el-table-column
            prop="num"
            align="center"
            width="120px"
            label="抽取数量"
          />

          <el-table-column
            label="操作"
            width="120px"
            align="center">
            <template v-slot="scope">
              <el-button type="danger" title="删除" size="mini" icon="el-icon-delete" circle @click="removeRule(index, scope.$index)" />
            </template>
          </el-table-column>

        </el-table>

      </div>

    </el-card>

    <rule-build-dialog
      :visible.sync="dialogVisible"
      :qu-type="quType"
      :excludes="excludes"
      @close="dialogVisible = false"
      @select="handleRuleBack"
    />

  </div>

</template>

<script>

import RuleBuildDialog from '@/views/admin/tmpl/components/components/RuleBuildDialog.vue'
export default {
  name: 'JoinRuleList',
  components: { RuleBuildDialog },
  props: {
    groupList: Array
  },
  data() {
    return {
      dialogVisible: false,
      excludes: [],
      quType: null,
      postForm: {
        groupList: []
      }
    }
  },
  watch: {

    // 重新计算分数
    groupList: {
      handler(val) {
        this.calc(val)
      },
      deep: true
    }
  },
  created() {
    this.postForm.groupList = this.groupList
  },
  methods: {


    // 显示知识点名称
    pointNames(pointList) {
      if (!pointList || pointList.length === 0) {
        return '无'
      }
      const names = []
      for (let i = 0; i < pointList.length; i++) {
        names.push(pointList[i].pointCode_dictText)
      }
      return names.join(',')
    },

    // 计算分数
    calc(val) {
      let paperQu = 0
      let paperScore = 0
      for (let i = 0; i < val.length; i++) {
        const item = val[i]
        let totalScore = 0
        let quCount = 0
        const ruleList = item.ruleList

        if (ruleList != null && ruleList.length > 0) {
          for (let j = 0; j < ruleList.length; j++) {
            totalScore += parseInt(ruleList[j].num) * item.perScore
            quCount += parseInt(ruleList[j].num)
          }
        }

        item.totalScore = totalScore
        item.quCount = quCount
        paperQu += quCount
        paperScore += totalScore
      }
      this.$emit('count', paperQu)
      this.$emit('score', paperScore)
    },

    // 打开选择窗口
    openSelectQu(index) {
      this.quType = this.postForm.groupList[index].quType
      this.index = index
      this.dialogVisible = true
    },

    // 移除规则
    removeRule(index1, index2) {
      this.$confirm('确实要移除规则吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.postForm.groupList[index1].ruleList.splice(index2, 1)
      })
    },

    // 选定规则
    handleRuleBack(data) {
      const group = this.postForm.groupList[this.index]
      if (!group.ruleList) {
        this.$set(group, 'ruleList', [])
      }
      group.ruleList.push(data)

      this.dialogVisible = false
      this.calc(this.postForm.groupList)
    }
  }
}
</script>

<style scoped>
.content-card{
  margin-bottom: 20px;
  line-height: 28px;
}
</style>

